<template>
    <div class="row">
        <div style="display: flex; align-items: center; flex-direction: row">
            <div>
                <text class="title" style="padding-right: 4px">{{ title }}</text>
            </div>

            <div>
                <text class="sub">{{ sub }}</text>
            </div>
        </div>
        <div style="flex-grow: 1"></div>
        <text v-if="moreLink">更多</text>
        <img v-if="moreLink" src="@/assets/back.svg" style="width: 16px; height: 16px" />
    </div>
</template>

<script lang="ts">
import { ref, defineProps } from 'vue'

const props = defineProps(['title', 'sub', 'moreLink'])
export default {
    props: ['title', 'sub', 'moreLink'],
    setup(props) {}
}
</script>

<style lang="scss" scoped>
.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 20px;
    .title {
        font-size: 20px;
        color: grey;
        font-weight: bold;
    }
    .sub {
        font-size: 14px;
    }
}
</style>